/**
 * 腾讯地图-地图找房
 * @author: shirunpei
 * @date: 2017-10-19
 */
/* eslint-disable */
const TXMap = {
  map: undefined, // 地图实例
  overlays: [], // overlay 元素
  data: [], // overlay 数据
  listener: undefined, // idle 事件监听
  /**
   * [实例化 Tencent Map]
   * @method getInstance
   * @param  {[String]}    callbackName [回调函数名]
   */
  getInstance (callbackName) {
    let script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = `http://map.qq.com/api/js?v=2.exp&callback=${callbackName}`
    document.body.appendChild(script)
  },
  /**
   * 绘制遮盖层
   * @method drawOverlay
   * @param  {[Object]}    options [配置]
   * options.containerId   存放地图的容器id    String
   * options.overlays      所有的遮盖层        Array
   *   overlay             遮盖层
   *   overlay.latitude    遮盖层纬度          latitude:22.616229344088225
   *   overlay.longitude   遮盖层经度          longitude:113.83981704711914
   *   overlay.name        区域名称            String '宝安'
   *   overlay.house_count       区域的房源数量       Number  3257
   *   遮盖层样式在 ‘@/styles/txMap.less’
   */
  drawOverlay (options) {
    let _this = this
    this.options = options
    this.data = options.overlays
    this.clearOverlays(this.overlays)
    if (window.initMap === undefined) {
      window.initMap = function () {
        if (_this.map === undefined) {
          // 绘制地图
          _this.map = new window.qq.maps.Map(document.getElementById(_this.options.containerId), {
            // center: new window.qq.maps.LatLng(_this.options.lat || 22.702, _this.options.lng || 114.09),
            center: new window.qq.maps.LatLng(_this.options.lat || 23.16, _this.options.lng || 113.4094619751),
            zoom: _this.options.zoom || 10,
            minZoom: 10,
            zoomControl: false,
            mapTypeControl: false
          })

          _this.listener = qq.maps.event.addListener(_this.map, 'idle', () => {
            let bounds = _this.map.getBounds()
            let zoom = _this.map.getZoom()
            _this.options.callback && _this.options.callback(bounds, zoom)
            // options.callback ? options.callback(bounds, zoom) : null
          })
        }

        if (window.LocationOverlay === undefined) {
          window.LocationOverlay = function (position) {
            this.position = new window.qq.maps.LatLng(position.latitude, position.longitude)
          }
          window.LocationOverlay.prototype = new window.qq.maps.Overlay()
          window.LocationOverlay.prototype.construct = function () {
            let icon = this.icon = document.createElement('img')
            icon.className = 'map-location'
            this.icon.src = require('../images/rent/map_location.png')
            let iconStyle = this.icon.style
            //将dom添加到覆盖物层
            let panes = this.getPanes()
            //设置panes的层级，overlayMouseTarget可接收点击事件
            panes.overlayMouseTarget.appendChild(icon)
          }
          window.LocationOverlay.prototype.draw = function () {
            let overlayProjection = this.getProjection()
            //返回覆盖物容器的相对像素坐标
            let pixel = overlayProjection.fromLatLngToDivPixel(this.position)
            let iconStyle = this.icon.style
            iconStyle.left = pixel.x - 7 + 'px'
            iconStyle.top = pixel.y - 10 + 'px'
          }
        }
        // 定义绘制遮盖层
        if (window.CustomOverlay === undefined) {
          window.CustomOverlay = function (lat, lng, area, count, p_region) {
            this.position = new window.qq.maps.LatLng(lat, lng)
            this.area = area || p_region
            this.count = count
          }
          window.CustomOverlay.prototype = new window.qq.maps.Overlay()

          // 设置 Overlay 的 DOM 结构
          window.CustomOverlay.prototype.construct = function () {
            let div = this.div = document.createElement('div')
            div.className = 'overlay'
            let divStyle = this.div.style
            this.div.innerHTML = `<p class="count" >${this.count || 0}<span>套</span></p><p class="area">${this.area || ''}</p>`
            //将dom添加到覆盖物层
            let panes = this.getPanes()
            //设置panes的层级，overlayMouseTarget可接收点击事件
            panes.overlayMouseTarget.appendChild(div)
            _this.overlays.push(div)
            let center = this.position
            this.div.onclick = function () {
              let zoom = _this.map.getZoom()
              if (zoom === 10) {
                _this.map.setCenter(center)
                _this.map.setZoom(11)
              } else if (zoom === 11) {
                _this.map.setCenter(center)
                _this.map.setZoom(15)
              }
            }
          }

          // 设置 Overlay 的位置
          window.CustomOverlay.prototype.draw = function () {
            let overlayProjection = this.getProjection()
            //返回覆盖物容器的相对像素坐标
            let pixel = overlayProjection.fromLatLngToDivPixel(this.position)
            let divStyle = this.div.style
            divStyle.top = pixel.y - 53 + 'px'
            divStyle.left = pixel.x - 30 + 'px'
          }
        }

        // 绘制 Overlay
        if (_this.data instanceof Array){
          _this.data.map(item => {
            let overlay = new window.CustomOverlay(item.latitude, item.longitude, item.name, item.houseCount, item.p_region)
            overlay.setMap(_this.map)
          })
        }
        if (options.location) {
          let locationOverlay = new window.LocationOverlay(options.location)
          locationOverlay.setMap(_this.map)
        }
      }

      window.qq === undefined ? this.getInstance('initMap') : window.initMap()
    } else {
      window.initMap()
    }
  },
  /**
   * 绘制小区房源
   * @method drawDetailOverlay
   * @param  {[type]}          options [description]
   * @return {[type]}                  [description]
   */
  drawThreeOverlay (options) {
    let _this = this
    this.communityOptions = options
    this.data = options.overlays
    this.clearOverlays(this.overlays)
    if (window.ThreeOverlay === undefined) {
      window.ThreeOverlay = function (lat, lng, name, count) {
        this.position = new window.qq.maps.LatLng(lat, lng)
        this.name = name
        this.count = count
      }
      window.ThreeOverlay.prototype = new window.qq.maps.Overlay()

      window.ThreeOverlay.prototype.construct = function () {
        let div = this.div = document.createElement('div')
        div.className = 'three-overlay'
        let divStyle = this.div.style
        this.div.innerHTML = `<span class="count">${this.count || 0}套</span><span class="name">${this.name}</span>`
        //将dom添加到覆盖物层
        let panes = this.getPanes()
        //设置panes的层级，overlayMouseTarget可接收点击事件
        panes.overlayMouseTarget.appendChild(div)
        _this.overlays.push(div)

        let name = this.name
        let count = this.count
        this.div.onclick = function () {
          _this.communityOptions.callback && _this.communityOptions.callback(name, count)
        }
      }

      window.ThreeOverlay.prototype.draw = function () {
        let overlayProjection = this.getProjection()
        //返回覆盖物容器的相对像素坐标
        let pixel = overlayProjection.fromLatLngToDivPixel(this.position)
        let divStyle = this.div.style
        divStyle.top = pixel.y - 11 + 'px'
        divStyle.left = pixel.x - 42 + 'px'
      }
    }
    // 绘制 Overlay
    if (_this.data instanceof Array){
      _this.data.map(item => {
        let overlay = new window.ThreeOverlay(item.latitude, item.longitude, item.communityName, item.houseCount)
        overlay.setMap(_this.map)
      })
    }
  },
  /**
   * 绘制房源地点坐标
   * @method drawHouseLocation
   * @param  {[Object]}          options [配置]
   * options.containerId         存放地图的容器id   String
   * options.lat                 房源地点纬度       String | Number
   * options.lng                 房源地点经度       String | Number
   */
  drawHouseLocation (options) {
    let _this = this
    let lat = options.lat
    let lng = options.lng
    let draggable = options.draggable
    this.clearOverlays(this.overlays)
    if (window.drawHousePoint === undefined) {
      window.drawHousePoint = function (lat, lng, draggable) {
        let center = new window.qq.maps.LatLng(lat || options.lat, lng || options.lng)
        draggable = draggable === undefined ? options.draggable : draggable
        // 绘制地图
        _this.map = new window.qq.maps.Map(document.getElementById(options.containerId), {
          center: center,
          zoom: 13,
          draggable: draggable,
          zoomControl: false,
          mapTypeControl: false
        })
        let marker = new window.qq.maps.Marker({
          position: center,
          map: _this.map
        })
      }
      window.qq === undefined ? this.getInstance('drawHousePoint') : window.drawHousePoint(lat, lng, draggable)
    } else {
      window.drawHousePoint(lat, lng, draggable)
    }
  },
  /**
   * 清除地图上的 Overlay
   * @method clearOverlays
   * @param  {[type]}      overlays [description]
   * @return {[type]}               [description]
   */
  clearOverlays (overlays) {
    var overlay
    while (overlay = overlays.pop()) {
      overlay.onclick = null
      overlay.parentNode.removeChild(overlay)
    }
  },
  /**
   * 清除地图
   * @method clearMap
   * 在 Vue组件的 beforeDestroy 调用
   */
  clearMap  () {
    this.map = undefined
    if (this.listener) qq.maps.event.removeListener(this.listener)
  }
}

export default TXMap
/* eslint-enable */
